<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	
	</head>
	<style>
		*{padding: 0px;margin: 0px;/* border: 1px solid red; */}
		#wrap{
			margin: 5px auto;
			width: 1200px;
			height: 500px;
		}
		.video{
			margin: 5px auto;
			position: absolute;
			z-index: 9;
			/* display: none; */
		}
		#mainBox{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		#musicListBox{
			width: 30%;
			height: 600px;
		}
		#musicPlay{
			width: 30%;
		}
		#musicComment{
			height: 600px;
			width: 25%;
		}
		/* //唱片 */
		.music-player__image.play {
		    -webkit-animation: disc 5s linear 0s infinite;
		    animation: disc 5s linear 0s infinite;
		}
		
		/* 播放器唱片效果 */
		.music-player__disc {
		    float: left;
		    width: 130px;
		    height: 130px;
		    background: url(./img/cd.png) no-repeat center;
		    background-size: 100%;
		    position: relative;
			left: 25%;
			top: 25%;
		}
		
		/* 唱片指针 */
		.music-player__pointer {
		    width: 25px;
		    position: absolute;
		    right: -10px;
		    top: 0;
		    -webkit-transform-origin: right top;
		    -ms-transform-origin: right top;
		    transform-origin: right top;
		    -webkit-transform: rotate(-15deg);
		    -ms-transform: rotate(-15deg);
		    transform: rotate(-15deg);
		    -webkit-transition: all 0.3s;
		    -o-transition: all 0.3s;
		    transition: all 0.3s;
		}
		
		/* 唱片指针播放状态 加play类名 */
		.music-player__pointer.play {
		    -webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		    transform: rotate(0deg);
		}
		
		/* 唱片歌曲图片 */
		.music-player__image {
		    width: 80px;
		    height: 80px;
		    border-radius: 50%;
		    position: absolute;
		    overflow: hidden;
		    left: 0;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    margin: auto;
		}

		.audio{
			width: 100%;
			position: relative;
			bottom: 0px;
		}
		.navBox{
			display: flex;
		}
		
		#commentLi{
			display: flex;
			justify-content: space-between;
		}
		
		.wmv{
			position: absolute;
			right: 10px;
		}
		.mvShade{
			width: 85%;
			height: 700px;
			background-color: azure;
			position:absolute;
			z-index: 9;
		}
/* 旋转的动画定义 */
@-webkit-keyframes disc {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes disc {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
	</style>
	<body>
		<div id="wrap">
			<!-- //视频播放器 -->
			<div class="mvShade" v-show="mvIsShow" @click="closeMv()">
				<video width="1200" height="700" controls class="video" id="video" v-show="mvIsShow" :src="mvPath">
				</video>
			</div>
			
			<nav class="navbar navbar-light bg-light">
			  <a class="navbar-brand">悦动</a>
			    <div class="navBox">
					<input class="form-control mr-sm-2" type="search" v-model="musicName" @keyup.enter="Search()">
					<button class="btn btn-outline-success my-2 my-sm-0" type="button" @click="Search()">Search</button>
				</div>
			</nav>
			<div id="mainBox">
				<!-- 歌曲列表 -->
				<div id="musicListBox" class="overflow-auto">
					<div class="list-group">
					  <a href="javascript:" @click="changePlayID(item.id)" class="list-group-item list-group-item-action" v-for="item in musicList">{{item.name}} - 
					  <span v-for="Iname in item.artists">{{Iname.name}}</span>
					  <img src="img/wmv.png" width="20" v-if="item.mvid!=0" class="wmv" @click.stop="mvPlay(item.mvid)"/>
					  </a>
					  </div>
				</div>
				<!-- 音乐播放动画 -->
				<div id="musicPlay">
					 <!-- 唱片 -->
					 <div class="music-player__disc">
					     <!-- 唱片图片 -->
					     <div class="music-player__image " :class="{play:musicIsPlay}">
					         <img width="100%" :src="musicCover" alt="">
					     </div>
					     <!-- 指针 -->
					     <div class="music-player__pointer" :class="{play:musicIsPlay}"><img width="100%" src="./img/cd_tou.png" alt=""></div>
					 </div>
				</div>
				<!-- 音乐评论 -->
				<div id="musicComment" class="overflow-auto">
					<ul class="list-group">
					  <li class="list-group-item" v-for="item in commentList" id="commentLi" >
						  <div>
							  <img :src="item.user.avatarUrl" width="50px" >
						  </div>
						  <div >
						  <p class="">{{item.user.nickname}}</p>
						  {{item.content}}
						  </div>
					</li>
					</ul>
				</div>
			</div>
			<!-- 播放器控件 -->
			<audio controls="controls" autoplay="autoplay" loop="loop"  class="audio" :src="musicNowPath" @play="changPlay()" @pause="changPause()">
			</audio>

		</div>
	</body>
</html>
<script>
	var am=new Vue({
		el:"#wrap",
		data:{
			musicName:"光年之外",
			musicList:[],
			musicNowPlayID:"",
			musicNowPath:"https://m7.music.126.net/20201105145529/d92a56477bb0ad4985bf2cc6951177d8/ymusic/887f/e0a9/853d/681878e54bdcc8258f75cb38ba93cc94.mp3",
			//音乐头图
			musicCover:"./img/2.jpg",
			//评论集合
			commentList:[],
			//是否播放
			musicIsPlay:false,
			//mv的地址
			mvPath:"",
			//mv是否显示
			mvIsShow:false
		},
		methods:{
			// 查找音乐列表
			Search:function(){
				var that=this;
				// 得到歌曲的id
				axios.get("https://v1.alapi.cn/api/music/search?keyword="+this.musicName)
				.then(function(respone){
					that.musicList=respone.data.data.songs;
					//console.log(respone.data.data.songs)
				});
			},
			changePlayID:function(id){
				//点击为播放
				this.musicIsPlay=true;
				
				this.musicNowPlayID=id;
				console.log("当前播放歌曲id："+id)
				var that=this;
				//更改音乐头图地址,错误，找到不到图片路径
				axios.get("https://autumnfish.cn/song/detail?ids="+id)
				.then(function(respone){
					//console.log(respone.data.songs[0].al.picUrl);
					that.musicCover=respone.data.songs[0].al.picUrl;
				});
				
				// 更改音频地址
				axios.get("https://api.imjad.cn/cloudmusic/?type=song&search_type=1&id="+id)
				.then(function(respone){
					//console.log(respone.data.data[0].url);
					that.musicNowPath=respone.data.data[0].url;
				});
				
				//获取音乐的评论
				axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id)
				.then(function(respone){
					//console.log(respone.data.hotComments);
					that.commentList=respone.data.hotComments;
				});
				
			},
			//更改音乐播放器的停止与播放
			changPlay:function(){
				//console.log(this.musicIsPlay);
				this.musicIsPlay=true;
			},
			changPause:function(){
				this.musicIsPlay=false;
			},
			//播放mv
			mvPlay:function(mvid){
				//console.log(mvid)
				//显示video控件
				this.mvIsShow=true;
				//停止音乐播放
				
				var that=this;
				axios.get("https://autumnfish.cn/mv/url?id="+mvid)
				.then(function(respone){
					console.log(respone.data.data.url);
					that.mvPath=respone.data.data.url;
				});
			},
			//关闭视频
			closeMv:function(){
				this.mvIsShow=false;
				var video=document.getElementById("video");
				video.pause();
			}
		}
	})
</script>